<template>
  <div class="index">
  	<video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
                 @ready="playerReadied">
       </video-player>
    <c-menu menu="1"></c-menu>
 
</div>

</template>

<script>
  import cMenu from '@/components/menu'
  export default {
    data () {
      return {playerOptions: {
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: 'http://om8hes0h2.bkt.clouddn.com/fuchouzheliangmeng.mp4'
        }]
      }
      }
    },

    methods: {
   // player is ready
      playerReadied (player) {
        player.dimension('height', 200)
        // seek to 10s
        player.currentTime(10)
      }
    },
    mounted () {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player () {
        return this.$refs.videoPlayer.player
      }
    },
    components: {cMenu}
  }
</script>
<style src="../style/video.less"></style>
